<template>
  <el-card class="card">
    <div slot="header">
      <span>退瓶</span>
    </div>
    <div>
      <div class="title-table">押金单号</div>
      <el-table ref="multipleTable" :height="165" :data="tableData" :header-cell-class-name="headerCellStyle" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" :selectable="selectable" />
        <el-table-column prop="depositCode" label="押金单号" min-width="200" show-overflow-tooltip :selectable="selectable" />
        <el-table-column prop="goodsDesc" label="商品描述" min-width="300" show-overflow-tooltip :selectable="selectable" />
        <el-table-column prop="totalDeposit" label="总押金" min-width="80" show-overflow-tooltip :selectable="selectable" />
      </el-table>
      <el-form inline :model="form" class="returnForm" label-width="110px">
        <el-form-item label="" class="label-block">
          <el-checkbox v-model="form.checked" :disabled="multipleSelection.length > 0" @change="checkChange">无押金单</el-checkbox>
          <!-- <el-radio v-model="form.radio" :disabled="multipleSelection.length > 0" label="1" class="weight">无押金单</el-radio> -->
        </el-form-item>
        <div v-if="form.checked || multipleSelection.length > 0" class="weight">退瓶数量:</div>
        <div v-if="form.checked">
          <el-form-item v-for="(item, index) in goodsList" :key="index" :label="item.specName">
            <el-input-number v-model="item.num" placeholder="请输入退瓶数量" :min="0" :max="999" :controls="false" @change="numChange2" />
          </el-form-item>
        </div>
        <div v-if="multipleSelection.length > 0">
          <el-form-item v-for="(item, index) in goodsList" :key="index" :label="item.specName">
            <el-select v-model="item.num" placeholder="请选择退瓶数量" clearable @change="numChange" @clear="numChange">
              <el-option v-for="(item2, index2) in item.countList" :key="index2" :label="item2" :value="item2" />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item label="上门取瓶费" class="label-block">
          <el-input-number v-model="form.bottleRefundFee" :min="0" :controls="false" />
        </el-form-item>
        <el-form-item label="退瓶描述/原因" class="label-block textarea">
          <el-input v-model="form.description" type="textarea" maxlength="100" show-word-limit :rows="3" placeholder="请输入内容" style="width: 100%;" />
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script>
  import { depositlist, givebackRgRp, givebackGoodsAll } from '@/api'
  import { mapGetters } from 'vuex'
  export default {
    name: 'call-return',
    props: {
      temp: {
        type: Object,
        default: () => { return {} }
      },
      userData: {
        type: Object,
        default: () => { return {} }
      },
      addressData: {
        type: Object,
        default: () => { return {} }
      }
    },
    data() {
      return {
        form: {
          checked: false,
          bottleRefundFee: '',
          description: ''
        },
        tableData: [],
        multipleSelection: [],
        goodsList: [],
        depositDetails: [],
        isOnSubmit: false
      }
    },
    computed: {
      ...mapGetters(['userInfo'])
    },
    methods: {
      initData() {
        this.form.checked = false
        this.form.bottleRefundFee = ''
        this.form.description = ''
        this.tableData = []
        this.multipleSelection = []
        this.goodsList = []
        this.depositDetails = []
      },
      async getAllGoods() {
        const params = {
          corpSN: this.userInfo.corpSN,
          gtFlag: 2,
          orgSNNo: this.addressData.orgSNNo || this.temp.orgSNNo,
          csmType: this.temp.csmType
        }
        const res = await givebackGoodsAll(params)
        console.log(res)
        this.goodsList = res.data
        this.goodsList.forEach((item, index) => {
          this.$set(this.goodsList[index], 'num', '')
        })
      },
      async getData(csmId) {
        const params = {
          csmId: csmId
        }
        const res = await depositlist(params)
        this.tableData = res.data
        this.getAllGoods()
      },
      handleSelectionChange(val) {
        if (val.length > 1) {
          this.$refs.multipleTable.clearSelection()
          this.$refs.multipleTable.toggleRowSelection(val[val.length - 1])
        } else if (val.length === 1) {
          this.multipleSelection = [val[val.length - 1]]
        } else {
          this.multipleSelection = []
        }
        this.goodsList = []
        this.form.bottleRefundFee = ''
        if (this.multipleSelection.length > 0) {
          this.goodsList = this.multipleSelection[0].depositDetails
          this.goodsList.forEach((item, index) => {
            const countList = []
            for (let i = 1; i <= item.goodsCount; i++) {
              countList.push(i)
            }
            item.countList = countList
            this.$set(this.goodsList[index], 'num', '')
          })
        }
      },
      headerCellStyle({ column, columnIndex }) {
        if (columnIndex === 0) {
          return 'hiddenCheck'
        }
      },
      getDepositDetails() {
        const depositDetails = []
        this.goodsList.forEach((item) => {
          if (item.num > 0) {
            const obj = {
              depCode: item.depCode,
              goodsId: item.goodsId,
              goodsCount: item.num,
              goodsCode: item.goodsCode,
              goodsName: item.goodsName,
              specCode: item.specCode,
              specName: item.specName,
              corpSN: this.userInfo.corpSN
            }
            depositDetails.push(obj)
          }
        })
        this.depositDetails = depositDetails
      },
      checkChange(val) {
        if (val) {
          this.getAllGoods()
        }
        this.form.bottleRefundFee = ''
      },
      numChange() {
        this.getDepositDetails()
        this.givebackRgRp()
      },
      numChange2() {
        let count = 0
        this.goodsList.forEach((item) => {
          const num = item.num || 0
          count += item.totalRpFee * num
        })
        this.form.bottleRefundFee = count
      },
      async givebackRgRp() {
        const params = {
          csmType: this.temp.csmType,
          depositDetails: this.depositDetails
        }
        const res = await givebackRgRp(params)
        if (res.data || res.data === 0) {
          this.form.bottleRefundFee = res.data
        }
      },
      selectable() {
        return !this.form.checked
      }
    }
  }
</script>

<style lang="scss" scoped>
  .card {
    border-radius: 8px;
    & /deep/ .el-card__header {
      padding-bottom: 10px;
      padding-left: 10px;
      font-size: 14px;
      font-weight: bold;
    }
    & /deep/ .el-card__body {
      min-height: 100px;
      padding: 10px;

      .title-table {
        margin: 15px 0;
        font-size: 16px;
        font-weight: 600;
      }
      .submitBtn {
        float: right;
        margin: 10px 0;
      }
      .btnText {
        font-size: 14px;
      }
    }
    .returnForm {
      margin-top: 20px;
    }
    .title {
      margin-top: 0 !important;
    }
    .label-block {
      display: block;
    }
    .weight {
      font-weight: 700;
    }
    /deep/.textarea .el-form-item__content {
      width: 80%;
    }
    /deep/.hiddenCheck .el-checkbox {
      visibility: hidden;
    }
  }
</style>

